<!-- 选择城市 -->
<template>
    <el-select ref="selectRef" v-model="param.selectCityId" :remote-method="getCityList" :multiple="config.multiple" :loading="param.loading" clearable filterable remote 
    :disabled="config.disabled" :collapse-tags="config.collapsetags" @change="cityDataChange" placeholder="输入过滤下拉选择" style="width:100%">
        <template v-if="config.isIcon" #prefix><el-icon><MapLocation /></el-icon></template>
        <el-option v-for="(item,index) in param.cityOptions"  :key="index" :label="item.cityCName" :value="item.id"/>
    </el-select>
</template>

<script lang="ts" setup>
import {reactive, ref, watch, onMounted} from 'vue'
import { getCity } from '@/api/system/city'; // 引入城市接口

const emit = defineEmits(['cityId'])

const props = defineProps({
    config: {
        type: Object,
        default: () => {}
    },
    selectCityId:{ // 当前选中的城市id
        type: String,
        default: ''
    },
    index:{ // 当前修改数据行的下标
        type:Number,
        default: 0
    },
    inChina:{ // 1-只需要搜索除国内城市 0-只需要国外城市 2- 所有城市
        type:Number,
        default: 2
    }
    
})

// onActivated(() => {
//     console.log("onActivated",props.selectCityId);
// })
onMounted(() => {
    const cityListInfo = localStorage.getItem('cityList')
    if(props.selectCityId && cityListInfo){
        param.cityOptions = JSON.parse(cityListInfo)
    }
})
// 获取城市列表
const selectRef = ref()
const param = reactive({
  loading: false,
  citys: [{cityCName:'',id:''}],
  cityOptions: [],
  selectCityId: props.selectCityId
})


// 监听更新param.selectCityId
watch(() => props.selectCityId, (val: any) => {
    const cityListInfo = localStorage.getItem('cityList')
    param.cityOptions = JSON.parse(cityListInfo)
    param.selectCityId = val
}, { deep: true })

const getCityList = async (query: string) => {
    if (!query) return 
    param.loading = true
    let reqParam = {cityCName: query} 
    // if(props.inChina == 1){
    //     reqParam.cityType = 5  // 国内城市
    // }else if(props.inChina == 0){
    //     reqParam.cityType = 10 // 国外城市
    // }
    getCity(JSON.stringify(reqParam)).then((res: any) => {
        param.cityOptions = res.data
        param.loading = false
    })
}

const cityDataChange = (select: any) => {
    emit('cityId',select,props.index,param.cityOptions)
}
const clear = () => { 
    param.selectCityId = ''
}


defineExpose({
    clear
})


</script>
<style lang="scss" scoped></style>